<template>
	<view class="pointShop">
		<view class="search">
			<uni-search-bar 
				placeholder='搜索产品'
				:radius='50'
				v-model='keyword'
				cancelButton='none'
				@input='page = 1;initKindShop()'
				></uni-search-bar>
		</view>
		<view class="menus">
			<view @click='page = 1;styleId = item.styleId;initKindShop()' :class="['menuOne',styleId == item.styleId?'active':'']" v-for="(item,index) in kind" :key='index'>
				<text>{{item.style_name}}</text>
				<view class="line"></view>
			</view>
		</view>
		<view class="shopList" v-if='shop.length'>
			<view class="shopOne dFlex jStart_aStart" v-for='(item,index) in shop' @click='goPage("/shop/shopDetail?productId="+item.productId)' :key='index'>
				<view class="shopImg imgPublic">
					<image :src="item.list_img" mode='widthFix'></image>
				</view>
				<view class="shopInfo" v-if='item.is_vip==1'>
					<view class='shopName'>{{item.product_name}}</view>
					<view class="config dFlex jBetween_aCenter">
						
						<view class="huiCol">已售 {{item.sell_count}}</view>
					</view>
					<view class="price dFlex jBetween_aCenter">
						<view class="showPrice">
							<text>{{item.sell_price}}</text>元
						</view>
						<view class="btn">立即购买</view>
					</view>
				</view>
				<view class="shopInfo" v-if='item.is_vip==2'>
					<view class='shopName'>{{item.product_name}}</view>
					<view class="config dFlex jBetween_aCenter">
						<view class="huiCol">原价 <text>￥{{item.market_price}}</text></view>
						<view class="huiCol">已兑 {{item.sell_count}}</view>
					</view>
					<view class="price dFlex jBetween_aCenter">
						<view class="showPrice">
							<text>{{item.point}}</text>积分 + 运费<text>{{item.freight}}</text>元
						</view>
						<view class="btn">立即兑换</view>
					</view>
				</view>
			</view>
		</view>
		<view class="empty imgPublic" v-else>
			<image src="../static/images/empty.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				styleId:'',
				kind:[],
				
				shop:[],
				page:1,
				load:false,
				keyword:'',
			};
		},
		onLoad(e){
			console.log(e);
			this.styleId = e.styleId?e.styleId:'';
			this.initKind();
		},
		onReachBottom() {
			if(this.load){
				this.load = false;
				this.page ++;
				this.initKindShop();
			}
		},
		methods:{
			// 商品分类
			initKind(){
				this.tool.getData('PointProduct/styleList',{}).then(res=>{
					console.log(res);
					if(res){
						this.kind = res;
						if(!this.styleId){
							this.styleId = res[0].styleId;
						}
						this.initKindShop();
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 分类下的商品
			initKindShop(){
				this.tool.getData('PointProduct/goodsList',{
					page:this.page,
					keyword:this.keyword,
					styleId:this.styleId,
					memberId:uni.getStorageSync('userId')
				}).then(res=>{
					console.log(res);
					if(res){
						this.shop = this.page == 1?res.list:this.shop.concat(res.list);
						this.load = res.list.length >= 10 ? true : false;
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			goPage(url){
				uni.navigateTo({
					url:url,
				})
			}
		}
	}
</script>

<style lang="scss">
	.pointShop{
		width:100%;
		.search{
			width:100%;
			.uni-searchbar{
				padding:12px!important;
			}
		}
		.shopList{
			width: 100%;
			padding:12px;
			box-sizing: border-box;
			.shopOne{
				width:100%;
				margin-bottom: 12px;
				.shopInfo{
					width:calc(100% - 109px);
					.price{
						width:100%;
						background: rgba(100, 255, 255, 0.1);
						border-radius: 5px;
						overflow: hidden;
						.showPrice{
							flex:1;
							font-size: 12px;
							color:#1664FF;
							text-align: center;
							text{
								font-size: 14px;
								padding: 0 5px;
								font-weight: bold;
							}
						}
						.btn{
							color:white;
							background:#1664FF;
							padding:5px 10px;
							font-size:13px;
							width: max-content;
						}
					}
					.config{
						width:100%;
						font-size:12px;
						color:#666666;
						margin: 8px auto;
						.huiCol{
							text{
								text-decoration: line-through;
							}
						}
					}
					.shopName{
						width:100%;
						font-weight:bold;
						line-height: 20px;
						word-break: break-all;
						overflow: hidden;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
				}
				.shopImg{
					width:97px;
					height: 97px;
					overflow: hidden;
					margin-right: 12px;
					border-radius: 5px;
					image{
						width:100%;
						border-radius: 5px;
						height: auto;
					}
				}
			}
		}
		.menus{
			width: 100%;
			overflow: hidden;
			overflow-x: auto;
			white-space: nowrap;
			.menuOne{	
				display: inline-block;
				width:20%;
				text-align: center;
				font-weight: bold;
				color:#999999;
				.line{
					width: 21px;
					height: 2px;
					border-radius: 50px;
					margin: 7px auto 0;
					background: none;
				}
			}
			.active{
				color: #323232;
				.line{
					background: #1664FF;
				}
			}
		}
	}
	page{
		background:white;
	}
</style>
